<template>
  <div class="box" :style="style1">
    {{ 1 + 1 }}
  </div>
  <div class="box" :style="style2">
    {{ 1 + 1 }}
  </div>
  <div class="testBox" :style="item.style" v-for="(item, index) in list"></div>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
  <button @click="add">添加</button>
</template>
<script>
import { ref, markRaw } from 'vue'
import { mat2d } from '../../libs/glmatrix/gl-matrix-min.js'
import AniBox from '../../../../daydayup2021/js/AniBox/dist/AniBox.esm.js'
import p2 from '../../../../daydayup2021/js/p2.min.js'
console.log(mat2d, p2, AniBox)
export default {
  data() {
    return {
      a: 1,
      b: 2,
      style1: {},
      style2: {},
      style: {},
      list: markRaw([])
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      // ?? 处理null undefined的值时候赋值
      // || 处理null undefined 0 false 的时候赋值  false判断与空值判断
      let a = 0
      let b = a ?? 9
      let c = a || 9
      console.log(b, c)

      let mat = mat2d.create()
      mat2d.rotate(mat, mat, Math.PI / 4)
      mat2d.translate(mat, mat, [100, 0])
      // transform:rotate(45deg) translate(100px,0);

      this.style1 = {
        transform: `matrix(${mat.join(',')})`
      }
      this.style2 = {
        transform: `rotate(45deg) translate(100px,0)`
      }
    }
  },
  mounted() {
    let main = AniBox.init()
    let world = new p2.World({
      gravity: [0, -9.8]
    })

    const createBox = () => {
      let ab = new AniBox({
        data() {
          return {
            x: 1,
            b: 2
          }
        },
        methods: {
          add() {},
          addPlane() {
            let plane = new p2.Body({
              mass: 0
            })
            let planeShape = new p2.Plane()
            plane.addShape(planeShape, [0, -40])
            world.addBody(plane)
          },
          init() {
            let body = new p2.Body({
              mass: 1,
              position: [0, 100]
            })
            let shape = new p2.Box({
              width: 10,
              height: 10
            })
            body.addShape(shape)
            this.body = body
            world.addBody(body)
          },
          chainOther(other) {
            let distanceC = new p2.DistanceConstraint(this.body, other.body)
            world.addConstraint(distanceC)
          }
        },
        step() {},
        created() {
          this.init()
          this.addPlane()
        },
        render() {
          let [x, y] = this.body.position
          this.style = {
            transform: `translate(${x}px,${100 - y}px)`,
            width: '10px',
            height: '10px'
          }
          //console.log(this.style)
        }
      })
      return ab
    }
    for (var i = 0; i < 10; i++) {
      let ab = createBox()
      ab.body.position = [i * 15, i * 20]
      console.log(i)
      if (i > 0 && i < 9) {
        //ab.chainOther(this.list[i - 1])
        //ab.body.mass = 0
      }
      if (i == 9) {
        ab.body.mass = 0
        ab.body.updateMassProperties()
      }
      world.addBody(ab.body)
      main.add(ab)
      console.log(this.list)
      this.list.push(ab)
    }
    main.addStep((res) => {
      world.step(1 / 60)
      this.$forceUpdate()
    })
    main.start()
    //console.log(`helloworld`)
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.row {
  display: flex;
}
.col {
  width: 100px;
  height: 10px;
  border: 1px solid #000;
}
.testBox {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
}
</style>
